<template>
    <section>
        <el-col :span="24">
            <el-button type="info" class="el-icon-search" size="small" plain @click="openBtn">
                选择颜色
            </el-button>
            <el-table :header-cell-style="{ background: '#F3F4F7', color: '#555' }" :data="styleColour" :max-height="height" border stripe size="mini">
                <el-table-column label="删除" width="55">
                    <template slot-scope="scope">
                        <el-button type="text" class="el-icon-delete" @click="delBtn(scope.$index)"></el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="colour_number" label="编码" width="200" align="center">
                    <template slot-scope="{ row }">
                        {{ row.colour_number }}
                    </template>
                </el-table-column>
                <el-table-column prop="colour" label="名称" width="200" align="center"></el-table-column>
                <el-table-column prop="colour_value" label="颜色展示" width="200" align="center">
                    <template slot-scope="{ row }">
                        <div :style="{background: '#' + Number(row.colour_value).toString(16).padStart(6, '0')}" style="width: 100%; height: 20px"></div>
                    </template>
                </el-table-column>
                <el-table-column label="" align="center"> </el-table-column>
            </el-table>
        </el-col>

        <!--选择款式颜色-->
        <el-dialog title="选择款式颜色" :visible.sync="colourVisible" top="10px" :close-on-click-modal="false" width="900px">
            <el-form inline>
                <el-form-item>
                    <el-input v-model="colourName" placeholder="颜色名称" clearable size="small"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="el-icon-search" @click="getColourData" size="small" :loading="btnLoading">
                        查询
                    </el-button>
                </el-form-item>
            </el-form>
            <el-table :data="colourData" ref="colourRef" style="width: 100%" max-height="400px" v-loading="loading" size="mini" @selection-change="selectionChange">
                <el-table-column type="selection" align="center" width="50"></el-table-column>
                <el-table-column prop="number" label="成品颜色编码"></el-table-column>
                <el-table-column prop="name" label="成品颜色名称"></el-table-column>
                <el-table-column prop="value_ch" label="色值"></el-table-column>
                <el-table-column prop="value_ch" label="颜色展示">
                    <template slot-scope="{ row }">
                        <div style="width: 100px;height: 18px;" :style="{'background-color': row.value_ch}"></div>
                    </template>
                </el-table-column>
                <el-table-column prop="state" label="状态">
                    <template slot-scope="{row}">
                        <el-tag v-if="row.state===0" type="success" size="mini">启用</el-tag>
                        <el-tag v-else type="info" size="mini">未启用</el-tag>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer">
                <el-button @click="colourVisible=false;" size="small" plain>退 出</el-button>
                <el-button type="primary" @click="saveBtn" size="small" :disabled="selectData.length==0 || selectData.length>2">确 定</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>

import {colourList} from "../../../api/bs/info";

export default {
    name: "designColorEd",
    props: {
        styleColour:{
            type: Array,
            default: []
        },
        height: {
            type: Number,
            default: 0
        },
        isEdit:{
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            user: {},
            nodeActions: [],

            colourVisible: false,
            selectData: [],
            colourData: [],
            colourName: "",
        }
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
    },
    watch:{

    },
    methods: {
        openBtn(){
            this.colourVisible = true;
            if(this.colourData.length == 0){
                this.getColourData();
            }
        },
        delBtn(index){
            this.$confirm(`删除该颜色, 是否继续`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.styleColour.splice(index, 1);
            }).catch(() => {

            })
        },
        selectionChange(row){
            this.selectData = row;
        },
        getColourData(){
            this.loading = true;
            colourList({page: 1, limit: 100, state: 0, name: this.colourName}).then((res) => {
                this.loading = false;
                this.colourData = res.data.data;
                this.filterData();
            });
        },
        //过滤已经选择过的颜色
        filterData(){
            let colourIds = [];
            this.styleColour.forEach(item => {
                colourIds.push(item.colour_id);
            });
            let data = [];
            this.colourData.forEach(item => {
                if(!colourIds.includes(item.id)){
                    data.push(item);
                }
            })
            this.colourData = data;
        },
        saveBtn(){
            if(this.selectData.length==0 || this.selectData.length>2){
                this.$message.warning("保存失败：最多可以选择2种颜色");return;
            }
            let position = this.styleColour.length > 0 ? this.styleColour[this.styleColour.length-1]['position']+1 : 1;
            this.selectData.forEach(item => {
                this.styleColour.push({
                    id: "#_"+item.id,
                    colour_id: item.id,
                    colour_number: item.number,
                    colour_value: item.value,
                    colour: item.name,
                    position: position
                });
            });
            this.colourVisible = false;
            this.$refs.colourRef.clearSelection();
            this.filterData();
            console.log("款式颜色", this.styleColour)
        },
    },
    mounted() {

    }
}
</script>

<style scoped>

</style>
